<template>
    <div :class="`tech-address-search-item ${mode}`" @click="select">
        <div class="search-item-name text-overflow title-color">
            <span v-for="(item, index) in nameVal" :key="index" :style="item.isTheme ? fontColor : ''">{{item.value}}</span>
        </div>
        <div class="search-item-detail text-overflow">{{addressInfo.address}}</div>
    </div>
</template>

<script>
import { TechCell } from '@components/base';

import { dealSearchName } from '@biztools/address';
import ModeMixin from '@common/mixin';
export default {
    name: 'AddressItem',
    mixins: [ModeMixin],
    components: {},
    computed: {
        nameVal() {
            const { addressInfo, searchVal } = this.$props;
            return dealSearchName(addressInfo.title || '', searchVal);
        },
    },
    props: {
        searchVal: {
            type: String,
            default: '',
        },
        addressInfo: Object,
    },
    methods: {
        select() {
            this.$emit('select', this.$props.addressInfo);
        },
    },
};
</script>

<style lang="less">
.tech-address-search-item {
    .p-h(@gap-md);
    .p-v(@gap);
    .border-line();
    background-color: @white;
    &.black {
        background-color: @black-bg-color;
    }
    .search-item-name {
        .font-size();
        .m-b(@gap-sm);
        .name-red {
            color: @red;
        }
    }
    .search-item-detail {
        .font-size-sm();
        color: @gray-dark;
    }
}
</style>
